<template>
  <el-dialog
    title="不通过原因"
    :visible.sync="dialogVisible"
    width="520px"
    top="0"
    :before-close="cancelBtn"
    :close-on-click-modal="false"
    @open="openHandle"
  >
    <el-select v-model="selectValue" placeholder="请选择不通过原因" @change="selectChange">
      <el-option
        v-for="(item, index) in selectValList"
        :key="index"
        :label="item.dictLabel"
        :value="item.dictLabel">
      </el-option>
    </el-select>
    <el-input
      type="textarea"
      v-model="dataObj.examineReason"
      :minlength="1"
      :maxlength="30"
      show-word-limit
      placeholder="请输入1-50字以内的原因">
    </el-input>

    <span slot="footer" class="dialog-footer">
      <el-button class="cancel" @click="cancelBtn">取消</el-button>
      <el-button class="confirm" type="primary" @click="confirm">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { CheckFailReason } from "@/api/campSystem/campOper";
  export default {
    name: "NoPassDialog",
    props: {
      noPassDialogVisibleFu: Boolean,
      campsiteIdFu: [Number, String],
      idCardFu: [String, Number],
    },
    data() {
      return {
        dialogVisible: this.noPassDialogVisibleFu,
        dataObj: {
          examineReason : '',
          campsiteId: this.campsiteIdFu,
          idCard: this.idCardFu
        },
        selectValue: '',
        inputValue: '',
        selectValList: [],
        isChecked: false,// 防重复点击
      };
    },
    methods: {
      openHandle(){
        this.getDicts("camp_check_reason").then(response => {
          this.selectValList = response.data;
        });
      },
      confirm() {
        if(this.isChecked){
          return;
        }
        this.isChecked = true;
        if(this.dataObj.examineReason==""){
          this.isChecked = false;
          return this.msgInfo('请选择或输入不通过原因');
        }
        CheckFailReason(this.dataObj)
          .then(response => {
            console.log(response);
            if (response.code != 200) {
              this.isChecked = false;
              return this.msgError(response.msg);
            }
            this.isChecked = false;
            this.msgSuccess(response.msg);
            this.dialogVisible = false;
            this.$emit("closeNoPassDialog", this.dialogVisible, true);
          })
          .catch(error => {
            console.log(error);
            this.isChecked = false;
          });
      },
      // 取消,关闭弹框，修改父组件的值
      cancelBtn() {
        this.dialogVisible = false;
        this.$emit("closeNoPassDialog", this.dialogVisible, false);
      },
      // 改变select选项
      selectChange(val){
        this.dataObj.examineReason = val
      },
    },
    watch: {
      noPassDialogVisibleFu() {
        this.dialogVisible = this.noPassDialogVisibleFu;
      },
      campsiteIdFu() {
        this.dataObj.campsiteId = this.campsiteIdFu;
      },
      idCardFu() {
        this.dataObj.idCard = this.idCardFu;
      },
    },
  };
</script>

<style scoped lang="scss">
  .el-select{
    width: 100%;
  }
  ::v-deep .el-textarea{
    margin-top: 20px;
    height: 80px;
    .el-textarea__inner{
      width: 100%;
      height: 80px;
      /*min-height: 80px !important;*/
    }
  }
</style>




